<template>
   
  <div class="detail-container">
    <!-- <div v-if="order.orderItemList[0].type == 1"> -->

    <div v-if="order.status != 4 && order.status != 100">
      <div v-if="order.orderType==3">
        <div v-if="order.orderItemList[0].type == 1">
          <!-- formatStepStatus(order.status) -->
          <el-steps
            :active="order.status == 18 ? '1.5' : order.status + 1"
            finish-status="success"
            align-center
          >
            <el-step
              title="待付款"
              :description="formatTime(order.createTime)"
            ></el-step>
            <el-step
              title="待拼团"
              :description="formatTime(order.createTime)"
            ></el-step>
            <el-step
              title="待发货" 
              :description="order.status == 18?'':formatTime(order.paymentTime)"
            ></el-step>
            <el-step
              title="待收货"
              :description="formatTime(order.deliveryTime)"
            ></el-step>
            <!-- <el-step title="已收货待评价" :description="formatTime(order.receiveTime)"></el-step> -->
            <el-step
              title="已完成"
              :description="formatTime(order.receiveTime)"
            ></el-step>
            <!-- <el-step title="已关闭" :description="formatTime(order.modifyTime)"></el-step> -->
            <!-- <el-step title="可使用"></el-step> -->
          </el-steps>
        </div>
        <div v-else>
          <!-- formatStepStatus(order.status) -->
          <el-steps
            :active="vstatus"
            finish-status="success"
            align-center
          >
            <el-step
              title="待付款"
              :description="formatTime(order.createTime)"
            ></el-step>
            <el-step
              title="待拼团"
              :description="formatTime(order.createTime)"
            ></el-step>
            <el-step
              title="待核销"
              :description="order.status == 18?'':formatTime(order.paymentTime)"
            ></el-step>
            <!-- <el-step title="已发货待收货" :description="formatTime(order.deliveryTime)"></el-step>
        <el-step title="已收货待评价" :description="formatTime(order.receiveTime)"></el-step>
        <el-step title="可使用"></el-step> -->
            <el-step
              title="已完成"
              :description="formatTime(order.receiveTime)"
            ></el-step>
            <!-- <el-step title="已关闭" :description="formatTime(order.modifyTime)"></el-step>
        <el-step title="可使用"></el-step> -->
          </el-steps>
        </div>
      </div>
      <div v-else>
        <div v-if="order.orderItemList[0].type == 1">
          <!-- formatStepStatus(order.status) -->
          <el-steps
            :active="order.status + 1"
            finish-status="success"
            align-center
          >
            <el-step
              title="待付款"
              :description="formatTime(order.createTime)"
            ></el-step>
            <el-step
              title="待发货"
              :description="formatTime(order.paymentTime)"
            ></el-step>
            <el-step
              title="待收货"
              :description="formatTime(order.deliveryTime)"
            ></el-step>
            <!-- <el-step title="已收货待评价" :description="formatTime(order.receiveTime)"></el-step> -->
            <el-step
              title="已完成"
              :description="formatTime(order.receiveTime)"
            ></el-step>
            <!-- <el-step title="已关闭" :description="formatTime(order.modifyTime)"></el-step> -->
            <!-- <el-step title="可使用"></el-step> -->
          </el-steps>
        </div>
        <div v-else>
          <!-- formatStepStatus(order.status) -->
          <el-steps
            :active="order.status == 5 ? '2' : order.status + 1"
            finish-status="success"
            align-center
          >
            <el-step
              title="待付款"
              :description="formatTime(order.createTime)"
            ></el-step>
            <el-step
              title="待核销"
              :description="formatTime(order.paymentTime)"
            ></el-step>
            <!-- <el-step title="已发货待收货" :description="formatTime(order.deliveryTime)"></el-step>
        <el-step title="已收货待评价" :description="formatTime(order.receiveTime)"></el-step>
        <el-step title="可使用"></el-step> -->
            <el-step
              title="已完成"
              :description="formatTime(order.receiveTime)"
            ></el-step>
            <!-- <el-step title="已关闭" :description="formatTime(order.modifyTime)"></el-step>
        <el-step title="可使用"></el-step> -->
          </el-steps>
        </div>
      </div>
    </div>

    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger"
          >当前订单状态：{{ order.status | formatStatus }}</span
        >
        <div class="operate-button-container">
          <el-button
            size="mini"
            :disabled="storeId == 0"
            @click="showUpdateReceiverDialog"
            v-show="order.status === 1"
            >修改收货人信息</el-button
          >
          <el-button
            size="mini"
            @click="showLogisticsDialog"
            v-show="order.status === 2 || order.status === 3"
            >订单跟踪</el-button
          >
          <el-button
            size="mini"
            :disabled="storeId == 0"
            @click="showUpdateMoneyDialog"
            v-show="order.status === 0 && order.orderType != 4"
            >修改费用信息</el-button
          >
          <el-button
            size="mini"
            :disabled="storeId == 0"
            @click="showCloseOrderDialog"
            v-show="order.status === 0"
            >取消订单</el-button
          >
          <el-button
            size="mini"
            :disabled="storeId == 0"
            @click="showMarkOrderDialog"
            >备注订单</el-button
          >
        </div>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">基本信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">订单编号</el-col>
          <el-col :span="6" class="table-cell-title">用户昵称</el-col>
          <el-col :span="6" class="table-cell-title">支付方式</el-col>
          <!-- <el-col :span="4" class="table-cell-title">订单来源</el-col> -->
          <el-col :span="6" class="table-cell-title">订单类型</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{ order.orderSn }}</el-col>
          <el-col :span="6" class="table-cell">{{
            order.memberUsername
          }}</el-col>
          <el-col :span="6" class="table-cell">{{
            order.payType | formatPayType
          }}</el-col>
          <!-- <el-col :span="4" class="table-cell">{{
            order.sourceType | formatSourceType
          }}</el-col> -->
          <el-col :span="6" class="table-cell">{{
            order.orderType | formatOrderType
          }}</el-col>
        </el-row>
        <el-row>
          <el-col
            :span="6"
            class="table-cell-title"
            v-if="order.orderItemList[0].type == 1"
            >配送方式</el-col
          >
          <el-col
            :span="6"
            class="table-cell-title"
            v-if="order.orderItemList[0].type == 1"
            >物流单号</el-col
          >
          <!-- <el-col :span="4" class="table-cell-title">确认收货时间</el-col> -->
          <el-col :span="4" class="table-cell-title" v-if="order.orderType != 4"
            >发票状态</el-col
          >
          <!-- <el-col :span="4" class="table-cell-title">订单可得成长值</el-col> -->
          <!-- <el-col :span="4" class="table-cell-title">活动信息</el-col> -->
        </el-row>
        <el-row>
          <el-col
            v-if="order.orderItemList[0].type == 1"
            :span="6"
            class="table-cell"
            >{{ order.deliveryCompany | formatNull }}</el-col
          >
          <el-col
            v-if="order.orderItemList[0].type == 1"
            :span="6"
            class="table-cell"
            >{{ order.deliverySn | formatNull }}</el-col
          >
          <!-- <el-col :span="4" class="table-cell"
            >{{ order.autoConfirmDay }}天</el-col
          > -->
          <el-col :span="4" class="table-cell" v-if="order.orderType != 4">{{
            order.isTax | formatTax
          }}</el-col>
          <!-- <el-col :span="4" class="table-cell">{{order.integration}}</el-col>
          <el-col :span="4" class="table-cell">{{order.growth}}</el-col>
          <el-col :span="4" class="table-cell">
            <el-popover
              placement="top-start"
              title="活动信息"
              width="200"
              trigger="hover"
              :content="order.promotionInfo">
              <span slot="reference">{{order.promotionInfo | formatLongText}}</span>
            </el-popover>
          </el-col> -->
        </el-row>
      </div>
      <div style="margin-top: 20px" v-if="order.orderItemList[0].type == 1">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">收货人信息</span>
      </div>
      <div class="table-layout" v-if="order.orderItemList[0].type == 1">
        <el-row>
          <el-col :span="6" class="table-cell-title">收货人</el-col>
          <el-col :span="6" class="table-cell-title">手机号码</el-col>
          <!-- <el-col :span="6" class="table-cell-title">邮政编码</el-col> -->
          <el-col :span="12" class="table-cell-title">收货地址</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{ order.receiverName }}</el-col>
          <el-col :span="6" class="table-cell">{{
            order.receiverPhone
          }}</el-col>
          <!-- <el-col :span="6" class="table-cell">{{order.receiverPostCode}}</el-col> -->
          <el-col :span="12" class="table-cell">{{
            order | formatAddress
          }}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">商品信息</span>
      </div>
      <el-table
        ref="orderItemTable"
        :data="order.orderItemList"
        style="width: 100%; margin-top: 20px"
        border
      >
        <el-table-column label="商品图片" width="120" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.productPic" style="height: 80px" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.productName }}</p>
            <!-- <p>品牌：{{scope.row.productBrand}}</p> -->
          </template>
        </el-table-column>
        <el-table-column label="价格" width="120" align="center">
          <template slot-scope="scope">
            <p v-if="order.orderType == 4">{{ scope.row.productPrice }}积分</p>
            <p v-else>￥{{ scope.row.productPrice }}</p>
          </template>
        </el-table-column>
        <el-table-column label="商品种类" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.type | formatType }}
          </template>
        </el-table-column>
        <el-table-column label="规格" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.productAttr | formatProductAttr }}
          </template>
        </el-table-column>
        <el-table-column label="数量" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.productQuantity }}
          </template>
        </el-table-column>
        <el-table-column label="小计" width="120" align="center">
          <template slot-scope="scope">
            <p v-if="order.orderType == 4">
              {{ scope.row.productPrice * scope.row.productQuantity }}积分
            </p>
            <p v-else>
              ￥{{ scope.row.productPrice * scope.row.productQuantity }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="是否评价" width="120" align="center">
          <template slot-scope="scope">
            <div v-if="order.status === 3">
              {{ scope.row.isComment | formatComment }}
            </div>
            <div v-else></div>
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right; margin: 20px">
        <p v-if="order.orderType == 4">
          合计：<span class="color-danger">{{ order.totalAmount }}</span
          >积分
        </p>
        <p v-else>
          合计：<span class="color-danger">￥{{ order.totalAmount }}</span>
        </p>
      </div>
      <div style="margin-top: 60px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">费用信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="3" class="table-cell-title">商品合计</el-col>
          <el-col
            :span="3"
            class="table-cell-title"
            v-if="order.orderItemList[0].type == 1 && order.orderType != 4"
            >运费</el-col
          >
          <el-col :span="3" class="table-cell-title" v-if="order.orderType != 4"
            >优惠券</el-col
          >
          <el-col :span="3" class="table-cell-title" v-if="order.orderType != 4"
            >优惠金额</el-col
          >
          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
          <el-col :span="6" class="table-cell-title">应付款金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="table-cell">
            <div v-if="order.orderType == 4">{{ order.totalAmount }}积分</div>
            <div v-else>￥{{ order.totalAmount }}</div>
          </el-col>
          <el-col
            v-if="order.orderItemList[0].type == 1 && order.orderType != 4"
            :span="3"
            class="table-cell"
            >￥{{ order.freightAmount }}</el-col
          >
          <el-col :span="3" class="table-cell" v-if="order.orderType != 4"
            >-￥{{ order.couponAmount }}</el-col
          >
          <el-col :span="3" class="table-cell" v-if="order.orderType != 4"
            >-￥{{ order.discountAmount }}</el-col
          >
          <el-col :span="6" class="table-cell">
            <div v-if="order.orderType == 4">
              <span class="color-danger">{{
                order.totalAmount + order.freightAmount
              }}</span
              >积分
            </div>
            <div v-else>
              <span class="color-danger"
                >￥{{ order.totalAmount + order.freightAmount }}</span
              >
            </div>
          </el-col>
          <el-col :span="6" class="table-cell">
            <div v-if="order.orderType == 4">
              <span class="color-danger">{{
                (
                  order.totalAmount +
                  order.freightAmount -
                  order.couponAmount -
                  order.discountAmount
                ).toFixed(0)
              }}</span
              >积分
            </div>
            <div v-else>
              <span class="color-danger"
                >￥{{
                  (
                    order.totalAmount +
                    order.freightAmount -
                    order.couponAmount -
                    order.discountAmount
                  ).toFixed(2)
                }}</span
              >
            </div>
          </el-col>
          <!-- <el-col :span="6" class="table-cell">-￥{{order.integrationAmount}}</el-col> -->
        </el-row>
        <!-- <el-row>
          <el-col :span="6" class="table-cell-title">活动优惠</el-col>
          <el-col :span="6" class="table-cell-title">折扣金额</el-col>
          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
          <el-col :span="6" class="table-cell-title">应付款金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">-￥{{order.promotionAmount}}</el-col>
          <el-col :span="6" class="table-cell">-￥{{order.discountAmount}}</el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger">￥{{order.totalAmount+order.freightAmount}}</span>
          </el-col>
          <el-col :span="6" class="table-cell">
            <span class="color-danger">￥{{order.payAmount+order.freightAmount-order.discountAmount}}</span>
          </el-col>
        </el-row> -->
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">操作信息</span>
      </div>
      <el-table
        style="margin-top: 20px; width: 100%"
        ref="orderHistoryTable"
        :data="order.historyList"
        border
      >
        <el-table-column label="操作者" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.operateMan }}
          </template>
        </el-table-column>
        <el-table-column label="操作时间" width="160" align="center">
          <template slot-scope="scope">
            {{ formatTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="原订单状态" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.preStatus | formatStatus }}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.orderStatus | formatStatus }}
          </template>
        </el-table-column>

        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            {{ scope.row.note }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      title="修改收货人信息"
      :visible.sync="receiverDialogVisible"
      width="40%"
    >
      <el-form :model="receiverInfo" ref="receiverInfoForm" label-width="150px">
        <el-form-item label="收货人姓名：">
          <el-input
            v-model="receiverInfo.receiverName"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码：">
          <el-input v-model="receiverInfo.receiverPhone" style="width: 200px">
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="邮政编码：">
          <el-input
            v-model="receiverInfo.receiverPostCode"
            style="width: 200px"
          >
          </el-input>
        </el-form-item> -->
        <el-form-item label="所在区域：">
          <v-distpicker
            :province="receiverInfo.receiverProvince"
            :city="receiverInfo.receiverCity"
            :area="receiverInfo.receiverRegion"
            @selected="onSelectRegion"
          ></v-distpicker>
        </el-form-item>
        <el-form-item label="详细地址：">
          <el-input
            v-model="receiverInfo.receiverDetailAddress"
            type="textarea"
            rows="3"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="receiverDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateReceiverInfo"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="修改费用信息"
      :visible.sync="moneyDialogVisible"
      width="40%"
    >
      <div class="table-layout">
        <el-row>
          <el-col :span="8" class="table-cell-title">商品合计</el-col>
          <el-col :span="8" class="table-cell-title">运费</el-col>
          <el-col :span="8" class="table-cell-title">优惠券</el-col>
          <!-- <el-col :span="6" class="table-cell-title">积分抵扣</el-col> -->
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell"
            >￥{{ order.totalAmount }}</el-col
          >
          <el-col :span="8" class="table-cell">
            <el-input v-model.number="moneyInfo.freightAmount" size="mini"
              ><template slot="prepend">￥</template></el-input
            >
          </el-col>
          <el-col :span="8" class="table-cell"
            >-￥{{ order.couponAmount }}</el-col
          >
          <!-- <el-col :span="6" class="table-cell"
            >-￥{{ order.integrationAmount }}</el-col
          > -->
        </el-row>
        <el-row>
          <!-- <el-col :span="6" class="table-cell-title">活动优惠</el-col> -->
          <el-col :span="8" class="table-cell-title">优惠金额</el-col>
          <el-col :span="8" class="table-cell-title">订单总金额</el-col>
          <el-col :span="8" class="table-cell-title">应付款金额</el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="6" class="table-cell"
            >-￥{{ order.promotionAmount }}</el-col
          > -->
          <el-col :span="8" class="table-cell">
            <el-input v-model.number="moneyInfo.discountAmount" size="mini"
              ><template slot="prepend">-￥</template></el-input
            >
          </el-col>
          <el-col :span="8" class="table-cell">
            <span class="color-danger"
              >￥{{ order.totalAmount + moneyInfo.freightAmount }}</span
            >
          </el-col>
          <el-col :span="8" class="table-cell">
            <span class="color-danger"
              >￥{{
                (
                  order.totalAmount +
                  order.freightAmount -
                  order.couponAmount -
                  order.discountAmount
                ).toFixed(2)
              }}</span
            >
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="moneyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateMoneyInfo"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="发送站内信"
      :visible.sync="messageDialogVisible"
      width="40%"
    >
      <el-form :model="message" ref="receiverInfoForm" label-width="150px">
        <el-form-item label="标题：">
          <el-input v-model="message.title" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="内容：">
          <el-input v-model="message.content" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="messageDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSendMessage">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="关闭订单" :visible.sync="closeDialogVisible" width="40%">
      <el-form :model="closeInfo" label-width="150px">
        <el-form-item label="操作备注：">
          <el-input v-model="closeInfo.note" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseOrder">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="备注订单"
      :visible.sync="markOrderDialogVisible"
      width="40%"
    >
      <el-form :model="markInfo" label-width="150px">
        <el-form-item label="操作备注：">
          <el-input v-model="markInfo.note" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="markOrderDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleMarkOrder">确 定</el-button>
      </span>
    </el-dialog>
    <logistics-dialog
      v-model="logisticsDialogVisible"
      ref="logistics"
    ></logistics-dialog>
  </div>
</template>
<script>
import {
  getOrderDetail,
  updateReceiverInfo,
  updateMoneyInfo,
  closeOrder,
  updateOrderNote,
  deleteOrderById,
} from "@/api/order";
import LogisticsDialog from "@/views/oms/order/components/logisticsDialog";
import { formatDate } from "@/utils/date";
import VDistpicker from "v-distpicker";
const defaultReceiverInfo = {
  orderId: null,
  receiverName: null,
  receiverPhone: null,
  receiverPostCode: null,
  receiverDetailAddress: null,
  receiverProvince: null,
  receiverCity: null,
  receiverRegion: null,
  status: null,
  vstatus:null,
};
export default {
  name: "orderDetail",
  components: { VDistpicker, LogisticsDialog },
  data() {
    return {
      id: null,
      order: {},
      receiverDialogVisible: false,
      receiverInfo: Object.assign({}, defaultReceiverInfo),
      moneyDialogVisible: false,
      moneyInfo: {
        orderId: null,
        freightAmount: 0,
        discountAmount: 0,
        status: null,
      },
      messageDialogVisible: false,
      message: { title: null, content: null },
      closeDialogVisible: false,
      closeInfo: { note: null, id: null },
      markOrderDialogVisible: false,
      markInfo: { note: null },
      logisticsDialogVisible: false,
      storeId: null,
    };
  },
  created() {

    this.id = this.list = this.$route.query.id;
    getOrderDetail(this.id).then((response) => {
      this.order = response.data;
      var vstatus=response.data.status;
      if(vstatus==0){
        this.vstatus="1"
      }else if(vstatus==1){
        this.vstatus="2"
      }else if(vstatus==2){
        this.vstatus="3"
      }else if(vstatus==3){
        this.vstatus="4"
      }else if(vstatus==4){
        this.vstatus="5"
      }else if(vstatus==5){
        this.vstatus="3"
      }else if(vstatus==18){
        this.vstatus="2"
      }else if(vstatus==100){
        this.vstatus="5"
      }
    });
    console.log(this.storeId);
    this.storeId = this.$store.state.user.storeId;
  },
  filters: {
    formatTax(value) {
      if (value === 0) {
        return "未开票";
      } else if (value === 1) {
        return "已开票";
      } else {
        return "";
      }
    },
    formatComment(value) {
      if (value === 0) {
        return "待评价";
      } else if (value === 1) {
        return "已评价";
      }
    },

    formatNull(value) {
      if (value === undefined || value === null || value === "") {
        return "暂无";
      } else {
        return value;
      }
    },
    formatLongText(value) {
      if (value === undefined || value === null || value === "") {
        return "暂无";
      } else if (value.length > 8) {
        return value.substr(0, 8) + "...";
      } else {
        return value;
      }
    },
    formatPayType(value) {
      if (value === 1) {
        return "支付宝支付";
      } else if (value === 2) {
        return "微信支付";
      } else if (value === 3) {
        return "余额支付";
      } else if (value == 0) {
        return "未支付";
      } else if (value === 4) {
        return "积分支付";
      }
    },
    formatSourceType(value) {
      if (value === 1) {
        return "小程序";
      } else if (value === 2) {
        return "h5订单";
      } else if (value === 3) {
        return "PC订单";
      } else if (value === 4) {
        return "android订单";
      } else if (value === 5) {
        return "ios订单";
      }
    },
    formatOrderType(value) {
      if (value === 1) {
        return "普通订单";
      } else if (value === 2) {
        return "秒杀订单";
      } else if (value === 3) {
        return "拼团订单";
      } else if (value === 4) {
        return "积分订单";
      }
    },
    formatAddress(order) {
      let str = order.receiverProvince;
      if (order.receiverCity != null) {
        str += "  " + order.receiverCity;
      }
      str += "  " + order.receiverRegion;
      str += "  " + order.receiverDetailAddress;
      return str;
    },
    formatStatus(value) {
      if (value == 0) {
        return "待付款";
      } else if (value == 1) {
        return "待发货";
      } else if (value == 2) {
        return "待收货";
      } else if (value == 3) {
        return "已完成";
      } else if (value == 4) {
        return "已关闭";
      } else if (value == 5) {
        return "待核销";
      }else if(value == 18){
        return "待拼团";
      }else if(value == 100){
        return "拼团失败";
      }
    },
    formatPayStatus(value) {
      if (value === 0) {
        return "未支付";
      } else if (value === 4) {
        return "已退款";
      } else {
        return "已支付";
      }
    },
    formatDeliverStatus(value) {
      if (value === 0 || value === 1) {
        return "未发货";
      } else {
        return "已发货";
      }
    },
    formatType(value) {
      if (value === 1) {
        return "实物商品";
      } else {
        return "虚拟商品";
      }
    },
    formatProductAttr(value) {
      if (value == null) {
        return "";
      } else {
        // let attr = JSON.parse(value);
        // let attr = value.split(',');
        // let result='';
        // for(let i=0;i<attr.length;i++){
        //   result+=attr[i].key;
        //   result+=":";
        //   result+=attr[i].value;
        //   result+=";";
        // }
        return value;
      }
    },
  },
  methods: {
    onSelectRegion(data) {
      this.receiverInfo.receiverProvince = data.province.value;
      this.receiverInfo.receiverCity = data.city.value;
      this.receiverInfo.receiverRegion = data.area.value;
    },
    formatTime(time) {
      if (time == null || time === "") {
        return "";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    formatStepStatus(value) {
      if (value == 0) {
        return "待付款";
      } else if (value == 1) {
        return "待发货";
      } else if (value == 2) {
        return "已发货";
      } else if (value == 3) {
        return "已完成";
      } else if (value == 4) {
        return "已关闭";
      } else if (value == 5) {
        return "无效订单";
      }
      // if (value === 2) {
      //   //待发货
      //   return 2;
      // } else if (value === 3) {
      //   //已发货
      //   return 3;
      // } else if (value === 4) {
      //   //已完成
      //   return 4;
      // } else if (value === 5) {
      //            //已完成
      //            return 5;
      //          }else {
      //   //待付款、已关闭、无限订单
      //   return 6;
      // }
    },
    showUpdateReceiverDialog() {
      this.receiverDialogVisible = true;
      if (this.order.receiverProvince == this.order.receiverCity) {
        this.order.receiverCity = this.order.receiverCity.slice(0, 2) + "城区";
      }
      this.receiverInfo = {
        orderId: this.order.id,
        receiverName: this.order.receiverName,
        receiverPhone: this.order.receiverPhone,
        receiverPostCode: this.order.receiverPostCode,
        receiverDetailAddress: this.order.receiverDetailAddress,
        receiverProvince: this.order.receiverProvince,
        receiverCity: this.order.receiverCity,
        receiverRegion: this.order.receiverRegion,
        status: this.order.status,
      };
    },
    handleUpdateReceiverInfo() {
      this.$confirm("是否要修改收货信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        updateReceiverInfo(this.receiverInfo).then((response) => {
          this.receiverDialogVisible = false;
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          getOrderDetail(this.id).then((response) => {
            this.order = response.data;
          });
        });
      });
    },
    showUpdateMoneyDialog() {
      this.moneyDialogVisible = true;
      this.moneyInfo.orderId = this.order.id;
      this.moneyInfo.freightAmount = this.order.freightAmount;
      this.moneyInfo.discountAmount = this.order.discountAmount;
      this.moneyInfo.status = this.order.status;
    },
    handleUpdateMoneyInfo() {
      this.$confirm("是否要修改费用信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        updateMoneyInfo(this.moneyInfo).then((response) => {
          this.moneyDialogVisible = false;
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          getOrderDetail(this.id).then((response) => {
            this.order = response.data;
          });
        });
      });
    },
    showMessageDialog() {
      this.messageDialogVisible = true;
      this.message.title = null;
      this.message.content = null;
    },
    handleSendMessage() {
      this.$confirm("是否要发送站内信?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.messageDialogVisible = false;
        this.$message({
          type: "success",
          message: "发送成功!",
        });
      });
    },
    showCloseOrderDialog() {
      this.closeDialogVisible = true;
      this.closeInfo.note = null;
      this.closeInfo.id = this.id;
    },
    handleCloseOrder() {
      this.$confirm("是否要关闭?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = new URLSearchParams();
        params.append("ids", [this.closeInfo.id]);
        params.append("note", this.closeInfo.note);
        closeOrder(params).then((response) => {
          this.closeDialogVisible = false;
          this.$message({
            type: "success",
            message: "订单关闭成功!",
          });
          getOrderDetail(this.id).then((response) => {
            this.order = response.data;
          });
        });
      });
    },
    showMarkOrderDialog() {
      this.markOrderDialogVisible = true;
      this.markInfo.id = this.id;
      this.closeOrder.note = null;
    },
    handleMarkOrder() {
      this.$confirm("是否要备注订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = new URLSearchParams();
        params.append("id", this.markInfo.id);
        params.append("note", this.markInfo.note);
        params.append("status", this.order.status);
        updateOrderNote(params).then((response) => {
          this.markOrderDialogVisible = false;
          this.$message({
            type: "success",
            message: "订单备注成功!",
          });
          getOrderDetail(this.id).then((response) => {
            this.order = response.data;
          });
        });
      });
    },
    handleDeleteOrder() {
      this.$confirm("是否要进行该删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteOrderById([this.id]).then((response) => {
          this.$message({
            message: "删除成功！",
            type: "success",
            duration: 1000,
          });
          this.$router.back();
        });
      });
    },
    showLogisticsDialog() {
      this.logisticsDialogVisible = true;
      this.$refs.logistics.init(this.order.id);
    },
  },
};
</script>
<style scoped>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #f2f6fc;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>


